var echarts = require('echarts');
require('jquery');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

var angleChart = echarts.init(document.getElementById('angle'));


// 绘制图表
myChart.setOption({
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data: ['销量']
    },
    xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

angleChart.setOption({
    //南丁格尔图会通过半径表示数据的大小。
    roseType: 'angle',
    visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
            colorLightness: [0, 1]
        }
    },
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        data: [{
                value: 235,
                name: '视频广告',
            },
            {
                value: 274,
                name: '联盟广告'
            },
            {
                value: 310,
                name: '邮件营销'
            },
            {
                value: 335,
                name: '直接访问'
            },
            {
                value: 400,
                name: '搜索引擎'
            }
        ]
    }],
    itemStyle: {
        normal: {
            color: '#c23531',
            // 阴影的大小
            shadowBlur: 200,
            // 阴影水平方向上的偏移
            shadowOffsetX: 0,
            // 阴影垂直方向上的偏移
            shadowOffsetY: 0,
            // 阴影颜色
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        },
        emphasis: {
            shadowBlur: 200,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    },
    backgroundColor: '#2c343c',
    label: {
        normal: {
            textStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
            }
        }
    },
    labelLine: {
        normal: {
            lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
            }
        }
    }
})

var synChart = echarts.init(document.getElementById('syn'));
// 显示标题，图例和空的坐标轴
synChart.setOption({
    title: {
        text: '异步数据加载示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: []
    }]
});
// 异步加载数据
$.get('./data.json').done(function (result) {
    // 填入数据
    synChart.setOption({
        xAxis: {
            data: result.name
        },
        series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            data: result.sales
        }]
    });
});